<template>
    <div id="shoucang">
        <div style="background-color: #ffffff;">
        <div style="text-align: center; font-size: 1.5em;margin-top:5%;">收藏夹</div>

           <router-link to="/bookrack" slot="left">
            <i class="el-icon-arrow-left" style="float: left;margin-top:-5%;margin-left: 5%;"></i>
            </router-link>
        </div>

         <div class="sscc" v-on:click="togoshowA()">
           
                <div class="scne">杂七杂八</div>
                <div class="fengeee"></div>
                <div class="sctx"></div>
                <div class="scue">Misha</div>
            

        </div>

        <div class="sscc" v-on:click="togoshowB()">
            
                <div class="scne">看来我得有个关于码农的收藏夹了</div>
                <div class="fengeee"></div>
                <div class="sctx"></div>
                <div class="scue">一串字母</div>
           

        </div>

        <div class="sscc" v-on:click="togoshowC()">
            
                <div class="scne">你的旅行，我的梦</div>
                <div class="fengeee"></div>
                <div class="sctx"></div>
                <div class="scue">肥肥猫</div>
           

        </div>

         <div  v-for="(item,index) in shoucang_name" class="sscc" @click="togo(index)">     

                    <div class="scne">{{shoucang_name[index]}}</div>
                    <div class="fengeee"></div>        
                    <div class="sctx"></div>
                    <div class="scue">{{shoucang_username[index]}}</div>
                                                    
         </div>
            
       
          
    </div>
</template>

<script>

 export default{
       
        data(){
          
            return{
               
                shoucang_name:[
                    "杂七杂八","看来我得有个关于码农的收藏夹了","你的旅行，我的梦","值得反复阅读的回答"
                ],
                
                 shoucang_touxiang:[
                    "./src/assets/book/s09.jpg",

                    "./src/assets/book/s11.jpg"       
                ],

                  shoucang_username:[
                     "Misha","肥肥猫","gugugu","一串字母"
                ],
                
                  shoucang_engName:[
                     "booo_1","booo_2","booo_3","booo_4"
                  ]
           }
        },
         methods:{

             togoshowA:function(){
                this.$router.push({path:"/shoucang/shouViewa"});
             },
             togoshowB:function(){
                this.$router.push({path:"/shoucang/shouViewb"});
             },
             togoshowC:function(){
                this.$router.push({path:"/shoucang/shouViewc"});
             },

             getbook_ico(i){
                return this.shoucang_ico[i];
            },
            go(id){
                this.$store.commit("changeStyle",2.5);
                //id在store中找到
                this.$store.commit("choosebooks",id);

                this.$router.push({path:"booksView"});
            },
            togo(index){
                var id=this.shoucang_engName[index];
                this.go(id);
            },
              }
    }
</script>

<style>

#shoucang {
    background-color: #D3DCE6;
    font-family: "Microsoft YaHei";
    
    
}

.sscc {
    width:90%;
    height: 110px;
    background-color: #ffffff;
    margin-top:3%;
    margin-left: auto;
    margin-right: auto;
    opacity: 0.9;
    border-radius: 10px;
}

.scne {
    font-size: 1.6em;
    float:left;
    text-align: left;
    margin-top: 6%;
    margin-left: 5%;
    width:100%;
   
}
.fengeee {
     float: left;
     width:100%;
     height:2px;
     background-color: #D3DCE6;
     margin-top:2%;
 
}

.sctx {
       background-color: #324057;
        width:6%;
        height:25px;
        float: left;
        margin-left: 6%;
        margin-top: 4%;
        border: 2px #324057 solid;
        border-radius:50%;
}

.scue {
    float: left;
    margin-top:5%;
    margin-left: 2%;
}
</style>